<template>
	<view class="container">
		<!-- 筛选区域（仅保留搜索框，删除多余筛选） -->
		<view class="filter-bar">
			<view class="search-box">
				<i class="fa fa-search text-gray-400"></i>
				<input type="text" placeholder="搜索任务名称" v-model="searchKeyword" />
			</view>
		</view>

		<!-- 任务统计卡片 -->
		<view class="stats-container">
			<view class="stat-card all-tasks">
				<text class="stat-number">{{ allCount }}</text>
				<text class="stat-label">总任务数</text>
			</view>
			<view class="stat-card success-tasks">
				<text class="stat-number">{{ successCount }}</text>
				<text class="stat-label">执行成功</text>
			</view>
			<view class="stat-card failed-tasks">
				<text class="stat-number">{{ failedCount }}</text>
				<text class="stat-label">执行失败</text>
			</view>
		</view>

		<!-- 任务列表 -->
		<view class="task-list">
			<view class="task-item" v-for="(task, index) in filteredTasks" :key="index" @click="viewTaskDetail(task)">
				<view class="task-info">
					<view class="task-name">{{ task.name }}</view>
					<view class="task-time">{{ formatTime(task.executionTime) }}</view>
				</view>
				<view class="task-status">
					<view class="status-badge" :class="{
              'status-success': task.status === 'success',
              'status-failed': task.status === 'error',
              'status-running': task.status === 'running'
            }">
						<i class="fa fa-check" v-if="task.status === 'success'"></i>
						<i class="fa fa-times" v-if="task.status === 'error'"></i>
						<i class="fa fa-spinner fa-spin" v-if="task.status === 'running'"></i>
						<text class="status-text">{{ getStatusText(task.status) }}</text>
					</view>
					<i class="fa fa-angle-right text-gray-400"></i>
				</view>
			</view>

			<!-- 空状态 -->
			<view class="empty-state" v-if="filteredTasks.length === 0">
				<i class="fa fa-calendar-o text-gray-300"></i>
				<text class="empty-text">没有找到匹配的任务记录</text>
			</view>
		</view>

		<!-- Vant Weapp Popup 弹窗（替换原自定义弹窗） -->
		<van-popup :show="showDetail" position="bottom" @click-overlay="showDetail = false"
			:custom-style="{ height: '80vh', borderRadius: '16px 16px 0 0' }"
			>
			<!-- 弹窗头部 -->
			<view class="modal-header">
				<text class="modal-title">任务详情</text>
				<van-icon name="close" color="#888" size="20" @click="showDetail = false" />
			</view>

			<!-- 弹窗内容 -->
			<view class="modal-body" v-if="currentTask">
				<view class="detail-item">
					<text class="detail-label">任务名称：</text>
					<text class="detail-value">{{ currentTask.name }}</text>
				</view>
				<view class="detail-item">
					<text class="detail-label">执行时间：</text>
					<text class="detail-value">{{ formatTime(currentTask.executionTime) }}</text>
				</view>
				<view class="detail-item">
					<text class="detail-label">执行状态：</text>
					<view class="detail-status" :class="{
              'status-success': currentTask.status === 'success',
              'status-failed': currentTask.status === 'error',
              'status-running': currentTask.status === 'running'
            }">
						{{ getStatusText(currentTask.status) }}
					</view>
				</view>
				<view class="detail-item">
					<text class="detail-label">执行时长：</text>
					<text class="detail-value">{{ currentTask.duration || '无' }}</text>
				</view>
				<view class="detail-item full-width">
					<text class="detail-label">执行日志：</text>
					<view class="log-content">
						<text>{{ currentTask.log || '无' }}</text>
					</view>
				</view>
			</view>
		</van-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tasks: [], // 任务数据（从接口获取）
				searchKeyword: "", // 搜索关键词
				showDetail: false, // 弹窗显示状态
				currentTask: null // 当前选中的任务
			};
		},
		computed: {
			// 筛选后的任务列表（搜索关键词过滤）
			filteredTasks() {
				return this.tasks.filter(task =>
					task.name.toLowerCase().includes(this.searchKeyword.toLowerCase())
				);
			},
			// 统计数据
			allCount() {
				return this.tasks.length;
			},
			successCount() {
				return this.tasks.filter(task => task.status === "success").length;
			},
			failedCount() {
				return this.tasks.filter(task => task.status === "error").length;
			}
		},
		onLoad() {
			this.getInit(); // 页面加载时获取任务数据
		},
		methods: {
			// 从接口获取任务数据
			async getInit() {
				try {
					const params = {
						databaseName: 'taskRecords',
						state: 'look'
					};
					const result = await this.$axios('overallSituation', params);
					if (result.code === 200) {
						this.tasks = result.data || [];
					}
				} catch (error) {
					this.$showToast('数据获取失败')
					console.error('获取任务数据失败:', error);
				}
			},
			// 格式化时间戳为字符串
			formatTime(timestamp) {
				const date = new Date(timestamp);
				return `${date.getFullYear()}-${this.padZero(date.getMonth() + 1)}-${this.padZero(date.getDate())} ${this.padZero(date.getHours())}:${this.padZero(date.getMinutes())}:${this.padZero(date.getSeconds())}`;
			},
			// 数字补零（小于10的数字前加0）
			padZero(num) {
				return num < 10 ? `0${num}` : num;
			},
			// 转换状态值为中文文本
			getStatusText(status) {
				const statusMap = {
					success: "成功",
					error: "失败",
					running: "运行中"
				};
				return statusMap[status] || "未知";
			},
			// 查看任务详情（打开弹窗并赋值当前任务）
			viewTaskDetail(task) {
				this.currentTask = task;
				this.showDetail = true;
			},
			// 重新执行任务
			retryTask() {
				if (!this.currentTask) return;
				// 这里可扩展重新执行的接口逻辑
				uni.showToast({
					title: "已触发重新执行",
					icon: "none"
				});
				this.showDetail = false;
			}
		}
	};
</script>

<style scoped>
	/* 基础容器样式 */
	.container {
		min-height: 100vh;
		background-color: #f5f7fa;
	}

	/* 导航栏样式 */
	.navbar {
		height: 44px;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #165DFF;
		/* 主色 */
		color: #fff;
	}

	.navbar-title {
		font-size: 18px;
		font-weight: bold;
	}

	/* 筛选栏样式（仅保留搜索框） */
	.filter-bar {
		padding: 10px;
		background-color: #fff;
		border-bottom: 1px solid #eee;
	}

	.search-box {
		display: flex;
		align-items: center;
		background-color: #f5f7fa;
		border-radius: 15px;
		padding: 5px 15px;
	}

	.search-box input {
		flex: 1;
		font-size: 14px;
		padding: 5px 0;
		background-color: transparent;
		border: none;
		outline: none;
	}

	.search-box .fa-search {
		color: #888;
		margin-right: 8px;
	}

	/* 统计卡片样式 */
	.stats-container {
		display: flex;
		padding: 10px;
		background-color: #fff;
		margin: 10px;
		border-radius: 8px;
	}

	.stat-card {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 10px 0;
	}

	.stat-number {
		font-size: 20px;
		font-weight: bold;
		margin-bottom: 5px;
	}

	.all-tasks .stat-number {
		color: #165DFF;
	}

	.success-tasks .stat-number {
		color: #00B42A;
	}

	.failed-tasks .stat-number {
		color: #F53F3F;
	}

	.running-tasks .stat-number {
		color: #FF7D00;
	}

	.stat-label {
		font-size: 12px;
		color: #888;
	}

	/* 任务列表样式 */
	.task-list {
		margin: 0 10px 10px;
	}

	.task-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #fff;
		padding: 15px;
		border-radius: 8px;
		margin-bottom: 10px;
		box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
	}

	.task-info {
		flex: 1;
	}

	.task-name {
		font-size: 16px;
		font-weight: 500;
		margin-bottom: 5px;
	}

	.task-time {
		font-size: 12px;
		color: #888;
	}

	.task-status {
		display: flex;
		align-items: center;
	}

	.status-badge {
		display: flex;
		align-items: center;
		padding: 3px 8px;
		border-radius: 12px;
		margin-right: 10px;
		font-size: 12px;
	}

	.status-badge i {
		margin-right: 5px;
	}

	.status-success {
		background-color: #e8f7ee;
		color: #00B42A;
	}

	.status-failed {
		background-color: #fef0f0;
		color: #F53F3F;
	}

	.status-running {
		background-color: #fff7e6;
		color: #FF7D00;
	}

	/* 空状态样式 */
	.empty-state {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 50px 0;
	}

	.empty-state i {
		font-size: 48px;
		color: #eee;
		margin-bottom: 15px;
	}

	.empty-text {
		color: #888;
		font-size: 14px;
	}

	/* 弹窗样式（适配 Vant Popup） */
	.modal-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 15px;
		border-bottom: 1px solid #eee;
	}

	.modal-title {
		font-size: 18px;
		font-weight: bold;
	}

	.modal-body {
		padding: 15px;
		max-height: calc(80vh - 120px);
		/* 预留头部和底部高度 */
		overflow-y: auto;
	}

	.detail-item {
		display: flex;
		margin-bottom: 15px;
		align-items: flex-start;
	}

	.detail-item.full-width {
		flex-direction: column;
	}

	.detail-label {
		color: #888;
		font-size: 14px;
		min-width: 80px;
	}

	.detail-value {
		flex: 1;
		font-size: 14px;
	}

	.detail-status {
		padding: 3px 8px;
		border-radius: 12px;
		font-size: 12px;
	}

	.log-content {
		flex: 1;
		margin-top: 5px;
		padding: 10px;
		background-color: #f5f7fa;
		border-radius: 4px;
		font-size: 14px;
		line-height: 1.5;
		white-space: pre-wrap;
	}

	.modal-footer {
		display: flex;
		padding: 15px;
		border-top: 1px solid #eee;
		gap: 10px;
	}

	.close-btn {
		flex: 1;
		background-color: #f5f7fa;
		color: #333;
		border: none;
		padding: 10px 0;
		border-radius: 8px;
		font-size: 14px;
	}

	.retry-btn {
		flex: 1;
		background-color: #165DFF;
		color: #fff;
		border: none;
		padding: 10px 0;
		border-radius: 8px;
		font-size: 14px;
	}
</style>